import { Component } from "react";
import {
  Image,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from "react-native";
import {
  createDrawerNavigator,
  DrawerItems,
  NavigationActions,
  SafeAreaView,
  StackActions
} from "react-navigation";
import React from "react";
import HomeScreen from "../home/HomeScreen";
import { NavigationEvents } from 'react-navigation'
import NavigationService from "../../components/NavigationService";
import { statusBarHeight } from "../../util/AdapterUtil";
import image from "../../assets/image";

//抽屉里面第一个页面是TabRoot
class MyDrawerScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: null
    };
  }
  componentWillUnmount() {}

  componentDidMount() {
    //从全局里面拿
    this.setState({
        userInfo: store.getState().userInfo
    });

  }
  render() {
    let userInfo = this.state.userInfo;
    let imageHash = null
    if (userInfo){
        imageHash = userInfo.urlAddr
    }
    return (
      <View style={{ flex: 1 }}>
        <NavigationEvents
              onWillFocus={payload => {
                  this.setState({
                      userInfo: store.getState().userInfo
                  });
              }}/>
        <TouchableOpacity
          style={{
            paddingTop: statusBarHeight,
            width: "100%",
            flexDirection: "row",
            alignItems: "center",
            height: 70 + statusBarHeight
          }}
          onPress={() => {
            NavigationService.navigate("MineScreen");
          }}
        >
          <View style={{ marginLeft: 15 }}>
            <Image
              resizeMode={'cover'}
              source={imageHash ? { uri: "http://cdn.traceche.com/" + imageHash} : image.avatar_default}
              style={{ borderRadius: 25, width: 50, height: 50 }}
            />
          </View>
          <View style={{ position: "absolute", width: "100%", height: "100%" }}>
            <View
              style={{
                flex: 1,
                paddingTop: statusBarHeight,
                marginLeft: 80,
                justifyContent: "center",
                height: 50
              }}
            >
              <Text
                style={{
                  color: "#202020",
                  fontSize: 15
                }}
              >
                {userInfo ? userInfo.userName : "未命名"}
              </Text>
              <Text
                style={{
                  color: "#AAAAAA",
                  fontSize: 15
                }}
              >
                编辑资料
              </Text>
            </View>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            paddingTop: 30,
            paddingBottom: 10,
            marginLeft: 15,
            flexDirection: "row",
            justifyContent: "flex-start",
            alignItems: "center"
          }}
          onPress={() => {
            let obj = global.token;
            if (typeof obj == "undefined" || obj == null || obj == "") {
              NavigationService.navigate("login");
            } else {
              NavigationService.navigate("MlimitScreen");
            }
          }}
        >
          <Image source={image.amount} style={{ width: 30, height: 30 }} />
          <Text style={{ color: "#202020", fontSize: 15, marginLeft: 15 }}>
            我的额度
          </Text>
        </TouchableOpacity>
        <View
          style={{
            marginLeft: 60,
            height: 1,
            backgroundColor: "#ccc",
            transform: [{ scaleY: 0.5 }]
          }}
        />

        <TouchableOpacity
          style={{
            paddingTop: 10,
            paddingBottom: 10,
            marginLeft: 15,
            flexDirection: "row",
            justifyContent: "flex-start",
            alignItems: "center"
          }}
          onPress={() => {
            let obj = global.token;
            if (typeof obj == "undefined" || obj == null || obj == "") {
              NavigationService.navigate("login");
            } else {
              NavigationService.navigate("MBillScreen");
            }
          }}
        >
          <Image
            source={image.payment_record}
            style={{ width: 30, height: 30 }}
          />
          <Text style={{ color: "#202020", fontSize: 15, marginLeft: 15 }}>
            付款记录
          </Text>
        </TouchableOpacity>
        <View
          style={{
            marginLeft: 60,
            height: 1,
            backgroundColor: "#ccc",
            transform: [{ scaleY: 0.5 }]
          }}
        />

        <TouchableOpacity
          style={{
            paddingTop: 10,
            paddingBottom: 10,
            marginLeft: 15,
            flexDirection: "row",
            justifyContent: "flex-start",
            alignItems: "center"
          }}
          onPress={() => {
            let obj = global.token;
            if (typeof obj == "undefined" || obj == null || obj == "") {
              NavigationService.navigate("login");
            } else {
              NavigationService.navigate("MineScreen");
            }
          }}
        >
          <Image source={image.mine} style={{ width: 30, height: 30 }} />
          <Text style={{ color: "#202020", fontSize: 15, marginLeft: 15 }}>
            我的
          </Text>
        </TouchableOpacity>
        <View
          style={{
            marginLeft: 60,
            height: 1,
            backgroundColor: "#ccc",
            transform: [{ scaleY: 0.5 }]
          }}
        />
      </View>
    );
  }
}

export const MyDrawer = createDrawerNavigator(
  {
    TabRoot: {
      screen: HomeScreen
    }
    //
  },
  {
    // order: ['TabRoot', 'Notifications'],//routeNames数组，用于定义抽屉项目的顺序。
    // drawerWidth:100, //一般用默认
    drawerBackgroundColor: "#fff",
    initialRouteName: "TabRoot", //初始路由的routeName。
    drawerLockMode: "unlocked", //设置是否响应手势
    //'unlocked'   可以通过手势和代码 打开关闭抽屉
    //'locked-closed' 抽屉关闭状态  不能通过手势打开  只能通过代码实现
    //'locked-open'  抽屉打开状态  不能通过手势关闭  只能通过代码实现
    drawerPosition: "left", //选项是left或right。默认是left位置。
    useNativeAnimations: true, //启用原生动画。默认是true。
    // 设置自带标题栏的文字颜色
    // contentOptions:{
    //     activeTintColor: '#e91e63',
    //     itemsContainerStyle: {
    //         marginVertical: 0,
    //     },
    //     iconContainerStyle: {
    //         opacity: 1
    //     }
    // },
    //左边菜单栏样式自定义 默认下面的写法 自定义跳转 的地方props已经传进来
    contentComponent: props => (
      <ScrollView>
        <SafeAreaView
          style={{ flex: 1 }}
          forceInset={{ top: "always", horizontal: "never" }}
        >
          <MyDrawerScreen props={props}/>
        </SafeAreaView>
      </ScrollView>
    )
  }
);
